import ReactDOM from 'react-dom'
import React, { useState, useEffect, memo } from 'react'
import { useSelector } from 'react-redux'
// import { updateHomeNoticeBarAction } from '@store/actionCreators'
import { isSubscribe } from '@api'
import { _isDev } from '@api/config'


const NoticeBar = (props) => {
  return (
    ReactDOM.createPortal(
      props.children,
      document.getElementById('notices')
    )
  )
}


const NoticeBarWrapper =  memo( (props) => {
  const appConfig = useSelector(state => state.appConfig)
  const [isShow, setIsShow] = useState(false)
  const [closeStatus, setCloseStatus] = useState(false)

  // let dev = 'https://res.lexiangpingou.cn/images/826/2020/12/t118YQNaQe5g61Q835xzs5Ly83eTS0.jpg'
  // let pro = 'https://res.lexiangpingou.cn/images/826/2020/12/Kc23zyZq2o8P832dO377drP7372CcO.jpg'

  let dev = 'https://res.lexiangpingou.cn/images/826/2021/01/GZK4CCwE91J5Yk15C1KR955671E111.png'
  let pro = 'https://res.lexiangpingou.cn/images/826/2021/01/zSyOzcCSSchchH3C1c4yDDASQdC1aY.png'

  useEffect(() => {

    const isDev =  process.env.NODE_ENV === 'development' ? true : false
    let openid = "oCKOnuIQGRk-CkhF2Tnuv1fVzOSw"
    isSubscribe( isDev ? openid : appConfig?.userInfo?.openid).then(res => {
      if (res.status === "200") {
        if (res.data.subscribe === 1) {
          setCloseStatus(false)
        } else {
          setCloseStatus(true)
        }
      }
    })

  }, [appConfig])

  return (
    <>
      <NoticeBar>

        {isShow && <div className="mask">

          <img style={{ position: "absolute", left: 'calc((100vw - 6rem) / 2)', top: '-10rem', width: '6rem', height: '6rem', zIndex: '999' }} src={_isDev ? pro : dev} alt="" />
          {/* <img src="https://res.lexiangpingou.cn/images/826/2020/12/F4fL34ZjzFFT3DuRfli4fAJKt7iKR3.png" alt="" /> */}
        </div>}

        {closeStatus && <div className="notice flex-row"
          style={{
            height: '1.17rem',
            marginBottom: '.16rem',
            backgroundImage: 'url(https://res.lexiangpingou.cn/images/826/2020/10/vzpqv8VvVzqlPoOo8O7AdV00o0Ab08.png)',
            backgroundSize: '100%'
          }}>
          <div className="close"
            onClick={e => { setCloseStatus(!closeStatus)  
              setIsShow(false) }}
            style={{
              marginLeft: '.42rem'
            }}>
            <img src="https://res.lexiangpingou.cn/images/826/2020/10/IV3wlePvnnfnpzLp9V3nnX43NVPnn3.png" alt="" />
          </div>
          <button
            onClick={e => { setIsShow(!isShow) }}
            style={{
              marginRight: '.42rem',
              border: 'none',
              backgroundColor: '#ff752d',
              color: 'white',
              borderRadius: '.75rem',
              height: '.8rem',
              width: '2rem',
              lineHeight: '.8rem'
            }}
          > {isShow ? '关闭弹窗' : '去开启'}  </button>
        </div>}
      </NoticeBar>
    </>
  )
})


export default NoticeBarWrapper;